import { Counter, Header } from "@repo/ui";
import { createRoot } from "react-dom/client";
import "./style.css";
import typescriptLogo from "/typescript.svg";

import type { AppType } from "@repo/rpc";
import { hc } from "hono/client";
const client = hc<AppType>("http://localhost:3000/");

const res = await client.posts.$post({
  form: {
    title: "Hello Hono!",
    body: "This is a post created using Hono and TypeScript.",
  },
});

if (res.ok) {
  const data = await res.json();
  console.log(data.message);
}
const App = () => (
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" className="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src={typescriptLogo} className="logo vanilla" alt="TypeScript logo" />
    </a>
    <Header title="Web" />
    <div className="card">
      <Counter />
    </div>
  </div>
);

createRoot(document.getElementById("app")!).render(<App />);
